<template>
    <div>
        <cvue-dialog
            :dialogVisible="addDormVisible"
            title="添加宿舍楼"
            :isShowFoot="true"
            @handleOpen="openDialog"
            @closeDialog="closeDialog"
            @confirmDialog="confirmDialog"
            @handleClose="closeDialog"
            >
            <div  slot="dialogBody" class="">
                <div class="left-con the-con">
                    <el-tree
                    ref="addDormTree"
                        :props="{
                            children: 'children',
                            label: 'name'
                        }"
                        node-key='detailId'
                        :data="buildTree"
                        show-checkbox
                        @check='check'
                        :default-expand-all='false'
                        >
                    </el-tree>
                </div>
                <div class="right-con">
                     <el-table
                        ref="addDormTable"
                        :data="buildRoomList"
                        tooltip-effect="dark"
                        style="width: 100%"
                         height="400"
                       @select="select"
                       @select-all='selectAll'
                       @row-click="rowClick"
                   >
                        <el-table-column
                        type="selection"
                        width="55">
                        </el-table-column>
                        
                        <el-table-column
                        prop="name"
                        label="房间"
                        width="120">
                        </el-table-column>
                    </el-table>
                    <el-form class="bec-count">
                      <el-form-item label="每个房间默认床位数" :required="true">
                            <el-input-number v-model="bedCount" :min="1" :max="100"></el-input-number>
                      </el-form-item>
                    </el-form>
                </div>
                <div class="clear"></div>
            </div>
        </cvue-dialog>
    </div>
</template>
<script>
import cvueDialog from '@/components/cvue-dialog'
import makeTree from '@/util/makeTree'
export default {
    components: {
        cvueDialog
    },
    computed: {
        addDormVisible () {
            return this.$store.state.dorm.addDormVisible
        },
        buildTree () {
          return this.$store.state.dorm.buildTree
        },
        buildRoomList () {
          return this.$store.state.dorm.buildRoomList
        }
    },
    data () {
        return {
           selectedList: [],
           bedCount: 4
        }
    },
    methods: {
       
        openDialog () {
          this.bedCount = 4
           this.$store.dispatch('dorm/getBuildTree', {
             SchoolId: this.$store.state.common.cookiesObj.schoolId
           })
        },
        confirmDialog () {
            var data = this.$refs.addDormTree.getCheckedNodes(false, true)
           data = [].concat(data)
            console.log(data)
            var temp = {}
            var list = []
            for (var item of data) {
              if (item.grade == 1) {
                list.push([])
              }
              if (item.grade == 2) {
                temp = item
              }
              if (item.grade == 3) {
                item.floorNo = temp.name
              }
              list[list.length - 1].push(item)
            }
            console.log(list)
            var proList = []
            for (var dorm of list) {
              var promise = new Promise((resolve, reject) => {
                  var params = {
                    name: dorm[0].name,
                    schoolId: this.$store.state.common.cookiesObj.schoolId,
                    bedCount: this.bedCount,
                    buildId: dorm[0].buildingId,
                    bindingList: dorm.map(obj => {
                      return {
                        bindingId: obj.detailId,
                        bingingName: obj.name,
                        bingingType: obj.type,
                        floorNo: obj.floorNo
                      }
                    })
                  }
                  this.$store.dispatch('dorm/addDorm', params).then(res => {
                      this.$message.success('添加成功')
                      this.$store.dispatch('dorm/getDorm', {PageNum: 1})
                      resolve()
                  })
              })
              proList.push(promise)
            }
            Promise.all(proList).then(res => {
              
            })
            
             this.closeDialog()
        },
        closeDialog () {
          this.$store.state.dorm.addDormVisible = false
          this.$store.state.dorm.buildTree = []
        },
        check (a, b, c) {
          // debugger
          // console.log(b.checkedNodes)
          var list = []
          for (var item of b.checkedNodes) {
            if (item.grade == 3) {
              list.push(item)
            }
          }
          console.log(list)
          this.$refs.addDormTable.clearSelection()
          for (var row of list) {
            this.$refs.addDormTable.toggleRowSelection(row)
          }
        },
        
          rowClick (row, column, event) {
            this.$refs.addDormTable.toggleRowSelection(row)

            this.select(null, row)
        },
        select (a, b, c) {
           var treeSelected = this.$refs.addDormTree.getCheckedNodes(false, true)
           var isHave = false
           for (var item of treeSelected) {
             if (item.detailId == b.detailId) {
               isHave = true
             } 
           }
           if (isHave) {
             this.$refs.addDormTree.setChecked(b, false)
           } else {
             this.$refs.addDormTree.setChecked(b, true)
           }
        },
        selectAll (a, b, c) {
          if (a.length == 0) {
            var treeSelected = this.$refs.addDormTree.getCheckedNodes(false, true)
            for (var item of treeSelected) {
              if (item.grade == 3) {
                this.$refs.addDormTree.setChecked(item, false)
              }
            }
          } else {
            for (var node of a) {
              if (node.grade == 3) {
                this.$refs.addDormTree.setChecked(node, true)
              }
            }
          }
        }
    }
}
</script>
<style scoped>
.the-con{height: 500px; overflow: scroll;}
.left-con{float: left;width: 30%;}
.right-con{float: left;width: 70%;}
.clear{clear: both;}
.bec-count{padding: 20px 0 0 0;}
</style>
